<template>
    <section>
        <div class="wrapper" v-if="!isloading">
            <div class="caption">
                <p>{{originalDR.reason}}</p>
            </div>
            <div class="context">
                <van-tabs
                        v-model="active"
                        swipe-threshold=4
                        swipeable
                        title-active-color="#ee0a24"
                        line-width="60px"
                >
                    <van-tab title="基本信息">
                        <div class="content">
                            <ul>
                                <li>
                                    <span>提案编号</span>
                                    <p>{{originalDR.code}}</p>
                                </li>
                                <li>
                                    <span>会议名称</span>
                                    <p>{{originalDR.meetingname}}</p>
                                </li>
                                <li>
                                    <span>提案分类</span>
                                    <p>{{originalDR.categoryname}}</p>
                                </li>
                                <li>
                                    <span>正文</span>
                                    <div class="auto">
                                        {{filter(originalDR.content)}}
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </van-tab>

                    <van-tab title="提案人信息">
                        <div class="content">
                            <ul>
                                <li>
                                    <span>提案代表</span>
                                    <p>{{originalDR.signcreatorname}}</p>
                                </li>
                                <li>
                                    <span>联系方式</span>
                                    <p>{{originalDR.phoneno}}</p>
                                </li>
                                <li>
                                    <span>提案时间</span>
                                    <p>{{originalDR.createtime}}</p>
                                </li>
                                <li>
                                    <span>所属代表团</span>
                                    <p>{{originalDR.delegationname}}</p>
                                </li>
                                <li>
                                    <span>所在单位</span>
                                    <p>{{originalDR.creatorGroupname}}</p>
                                </li>
                            </ul>
                        </div>
                    </van-tab>

                    <van-tab title="附议人信息">
                        <div class="content">
                            <template v-for="(items,index) in resolutionerList">
                                <h3>附议人{{index}} ：</h3>
                                <ul>
                                    <li>
                                        <span>附议人</span>
                                        <p>{{items.createusername}}</p>
                                    </li>
                                    <li>
                                        <span>联系方式</span>
                                        <p>{{items.phoneno }}</p>
                                    </li>
                                    <li>
                                        <span>所属代表团</span>
                                        <p>{{items.delegationname }}</p>
                                    </li>
                                    <li>
                                        <span>所在单位</span>
                                        <p>{{ items.groupname }}</p>
                                    </li>
                                    <li>
                                        <span>附议时间</span>
                                        <p>{{items.createtime }}</p>
                                    </li>
                                </ul>
                            </template>

                        </div>
                    </van-tab>

                    <van-tab title="答复建议">
                        <div class="content">
                            <ul>
                                <li>
                                    <span>承办单位</span>
                                    <p>{{newsFLow.step6GroupName}}</p>
                                </li>
                                <li>
                                    <span>答复意见</span>
                                    <div class="auto">
                                        <div class="DRFLBCColumtTxt" v-for="item in newsFLow.step6">
                                            <p>{{item.contentBody}}</p>
                                            <p class="stime"><span>{{item.realName}}</span>{{item.approveTime}}</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </van-tab>

                    <van-tab title="满意度测评">
                        <div class="content">
                            <ul>
                                <li>
                                    <span>满意情况</span>
                                    <p>{{satisfactionRadio}}</p>
                                </li>
                                <li>
                                    <span>反馈意见</span>
                                    <div :class="auto ? 'auto' : ''">
                                        <input type="text" v-model="originalDR.comments"/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>
            <div class="show" @click="showPopup">
                <p>流程<br/>动态</p>
            </div>
        </div>
        <van-loading size="24px" style="margin:30px auto; text-align: center"  v-if="isloading">加载中...</van-loading>

        <van-popup
                v-if="show"
                v-model="show"
                round
                position="bottom"
                :style="{ minHeight: '30%', maxHeight: '80%' }"
        >
            <div class="process">
                <h2>流程动态</h2>
                <span @click="showPopup"></span>
                <div class="processbox">
                <ul>
                    <li :class="flowPathState<'1' ? 'gray' : ''">
                        <i>1</i>
                        <h3>步骤1</h3>
                        <h4>提交建议提案</h4>
                        <template v-if="flowPathState > 0">
                            <p>{{ originalDR.signcreatorname }}（{{originalDR.delegationname}}）提交提案</p>
                            <span>{{originalDR.createtime }}</span>
                        </template>
                    </li>
                    <li :class="flowPathState<'2' ? 'gray' : ''">
                        <i>2</i>
                        <h3>步骤2</h3>
                        <h4>待受理的建议提案</h4>
                        <template v-if="flowPathState > 1">
                            <p>代表团审核 {{ originalDR.status == -1 ? "不通过" : "通过" }}</p>
                            <span>{{ auditTime || "" }}</span>
                        </template>
                    </li>
                    <li :class="flowPathState<'3' ? 'gray' : ''">
                        <i>3</i>
                        <h3>步骤3</h3>
                        <h4>待审核的建议提案</h4>

                        <template v-if="flowPathState == 2&&temp==true">
                            <p>此提案与本代表团代表王维的提案内容相同，不予立案</p>
                            <p>{{ originalDR.maudittime || "" }} </p>
                        </template>
                        <template v-if="flowPathState > 2">
                            <p>
                                提案委审核
                                {{ originalDR.status == -2 ? "不通过" : "通过" }}
                            </p>
                            <span>{{ originalDR.maudittime || "" }} </span>
                        </template>
                    </li>

                    <li :class="flowPathState<'4' ? 'gray' : ''">
                        <i>4</i>
                        <h3>步骤4</h3>
                        <h4>待交办的建议提案</h4>
                        <template v-if="flowPathState > 2">
                                <p>{{newsFLow.step4.contentBody || ""}}</p>
                                <span>{{newsFLow.step4.approveTime || ""}}</span>
                        </template>
                    </li>
                    <li  :class="flowPathState<'5' ? 'gray' : ''">
                        <i>5</i>
                        <h3>步骤5</h3>
                        <h4>转交承办单位</h4>
                        <template v-if="flowPathState > 3">
                            <p>{{newsFLow.step5[0].contentBody || ""}}</p>
                            <span>{{newsFLow.step5[0].approveTime || ""}}</span>
                        </template>
                    </li>
                    <li :class="flowPathState<'6' ? 'gray' : ''">
                        <i>6</i>
                        <h3>步骤6</h3>
                        <h4>答复建议</h4>
                        <template v-if="flowPathState > 4">
                            <div class="procedure-label " style="padding-bottom:6px"
                                 v-for="item in newsFLow.step6">
                                <p>{{item.contentBody}}</p>
                                <span><span style="padding-right:6px">{{item.realName}}</span>{{item.approveTime}} </span>
                            </div>
                        </template>
                    </li>
                    <li :class="flowPathState<7 ? 'gray' : ''">
                        <i>7</i>
                        <h3>步骤7</h3>
                        <h4>满意度测评</h4>
                        <template v-if="flowPathState > 5">
                                <p>{{originalDR.satisfaction}}{{ originalDR.comments }}</p>
                                <span>{{ originalDR.evaluationTime }}</span>
                        </template>
                    </li>


                </ul>
                </div>
            </div>
        </van-popup>
    </section>
</template>
<script>
    import Vue from "vue";
    import {Tab, Tabs, Toast, Button, Loading} from "vant";
    import {Popup} from "vant";


    import api from "@/data/api/index.js";

    Vue.use(Tab);
    Vue.use(Tabs);
    Vue.use(Popup);
    Vue.use(Button);
    Vue.use(Loading);

    export default {
        data() {
            return {
                active: 0,
                text: "展开全部",
                auto: false,
                show: false,
                status: true,
                isloading: true,
                resolutionerList: [],//附议人
                resolutioners: "",
                originalDR: {  //原始提案
                    meetingid: "", // 会议id
                    category: "", // 提案分类
                    reason: "", // 提案标题
                    content: "", // 正文
                    suggestion: "" // 建议整改
                },
                temp:false,
                flowPathState:'',
                satisfactionRadio: '',//满意度
                newsFLow: {
                    step4: {},
                    step5: {},
                    step6: {},
                    step6reply: {},
                    step6GroupName: ''
                }//OA推送过来的流程
            };
        },
        created() {
            this.getList()

        },
        methods: {
            getList() {
                let id = this.$route.query.tdata;
                api.getDRParticulars(id).then(res => {
                    this.isloading = false;
                    if (res) {
                        this.DRData = res;
                        // 原始提案
                        if (res.proposal) {
                            this.satisfactionRadio = res.proposal.satisfaction?res.proposal.satisfaction:''
                            res.proposal.category = res.proposal.category.toString();
                            this.originalDR = res.proposal;
                            this.content = res.proposal.content;
                            this.status = res.proposal.status;
                            switch (res.proposal.status) {
                                case -4:
                                    this.flowPathState = 4;
                                    break;

                                case -3:
                                    this.flowPathState = 4;
                                    break;

                                case -2:
                                    this.flowPathState = 3;
                                    break;

                                case -1:
                                    this.flowPathState = 2;
                                    break;
                                case 0:
                                    this.flowPathState = 0;
                                    break;
                                case 1:
                                    this.flowPathState = 1;
                                    break;

                                case 2:
                                    this.flowPathState = 2;
                                    break;

                                case 3:
                                    this.flowPathState = 3;
                                    break;

                                case 4:
                                    this.flowPathState = 4;
                                    break;

                                case 5:
                                    this.flowPathState = 4;
                                    break;

                                case 6:
                                    this.flowPathState = 5;
                                    break;

                                case 7:
                                    this.flowPathState = 5;
                                    break;

                                case 8:
                                    this.flowPathState = 5;
                                    break;

                                case 9:
                                    this.flowPathState = 6;
                                    break;
                                case 10:
                                    this.flowPathState = 6;
                                case 11:
                                    this.flowPathState = 6;
                                    break;
                            }
                            if (res.audit) {
                                this.auditTime = res.audit.audittime
                            }
                            if (this.originalDR.id == '156'&&this.originalDR.reason=='规范停车场所，维护正常教学秩序') {
                                this.flowPathState = 2
                                this.temp = true
                            }
                            //根据OA推送过来数据设定流程
                            api.getDROAHistory(res.proposal.id).then(res => {
                                if (res.code == 'success') {
                                    let histories = res.data.histories
                                    let flowData = [];
                                    flowData = histories.filter(v => {
                                        return v.taskName === '部门审批' && v.contentBody != ''
                                    }) || ''
                                    this.newsFLow.step5 = histories.filter(v => {
                                        return v.taskName === '办公室审批' && v.contentBody != ''
                                    }) || ''
                                    let step6 = histories.filter(v => {
                                        return v.taskName === '会签审批'
                                    }) || ''

                                    this.newsFLow.step4 = flowData[0]
                                    if (step6 != '') {
                                        let groupName = []
                                        this.newsFLow.step6 = step6.filter(v => {
                                            return v.contentBody != ''
                                        }) || ''
                                    }
                                    // 工会作为承办单位时，意见需要过滤
                                    flowData = flowData.filter((v, i) => {
                                        return i > 0
                                    })
                                    if (flowData != '') {
                                        this.newsFLow.step6 = this.newsFLow.step6.concat(flowData)
                                        //根据approveTime重新排序
                                        this.newsFLow.step6 = this.sortKey(this.newsFLow.step6, "approveTime")
                                    }
                                    //承办单位
                                    if (res.department != '') {
                                        this.newsFLow.step6GroupName = res.department
                                    } else {
                                        step6.forEach(function (val, i, arr) {
                                            if (groupName.indexOf(arr[i].groupName) === -1 && arr[i].groupName) {
                                                groupName.push(arr[i].groupName)
                                            }
                                        });
                                        this.newsFLow.step6GroupName = groupName.toString()
                                    }
                                    if (this.newsFLow.step5) {
                                        this.flowPathState = 6
                                    } else if (this.newsFLow.step4) {
                                        this.flowPathState = 5
                                    }
                                    if(parseInt(this.originalDR.status)>9){
                                        this.flowPathState = 7;
                                    }

                                } else {

                                }
                            })

                        } else {
                            this.originalDR = {};
                        }
                        // 正式提案
                        if (res.merge) {
                            this.inDueFormDR = res.merge;
                        } else {
                            this.inDueFormDR = {};
                        }
                        // 附议人信息
                        if (res.motion && res.motion.length > 0) {
                            this.resolutionerList = res.motion;
                            var Arr = [];
                            res.motion.forEach(item => {
                                Arr.push(item.createusername);
                                // item.createtime = parseTime(item.createtime, "{y}-{m}-{d} {h}:{i}");
                            });
                            this.resolutioners = Arr.toString();
                        } else {
                            this.resolutionerList = [];
                        }

                    } else {
                        this.isloading = true
                    }
                });
            },
            filter(text) {
                var reg = /<[^<>]+>/g;//1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
                text = text.replace(reg, '');//替换HTML标签
                text = text.replace(/&nbsp;/ig, '');//替换HTML空格
                return text;
            },
            //时间排序
            sortKey(array, key) {
                return array.sort(function (a, b) {
                    var x = a[key];
                    var y = b[key];
                    return x > y ? 1 : x < y ? -1 : 0;
                });
            },
            showPopup() {
                this.show = !this.show;

            },
        },
    };
</script>
<style lang="scss" scoped>
    section {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        min-height: 100%;
    }

    .wrapper {
        .caption {
            padding: 15px 15px 45px;
            background: #c9151e;

            p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 1.5em;
                min-height: 1.5em;
                color: #fff;
                font-size: 20px;
            }
        }

        .context {
            min-height: 100px;
            margin-top: -30px;
            padding: 15px 0;
            background: #fff;
            border-top-left-radius: 30px;
            overflow: hidden;

            .content {
                padding: 10px 15px;
                font-size: 14px;

                ul {
                    margin-bottom: 12px;

                    li {
                        line-height: 1.5em;
                        min-height: 1.5em;
                        margin-bottom: 10px;

                        span {
                            float: left;
                            color: #999;
                        }

                        > p {
                            margin-left: 80px;
                            padding-bottom: 10px;
                            min-height: 1.5em;
                            border-bottom: 1px solid #ededed;
                        }

                        > div {
                            height: 15em;
                            margin-left: 80px;
                            text-align: justify;
                            overflow: hidden;

                            &.auto {
                                height: auto;
                            }
                        }
                    }
                }

                > p {
                    margin-left: 80px;
                    padding: 10px 0;
                    border-top: 1px solid #ededed;

                    span {
                        position: relative;
                        padding-right: 15px;
                        color: #999;

                        &::after {
                            content: ">";
                            position: absolute;
                            top: 0;
                            right: 0;
                            color: #aaa;
                            font-size: 16px;
                            font-weight: bold;
                            font-family: "宋体";
                            transform: rotate(90deg);
                        }

                        &.auto::after {
                            transform: rotate(-90deg);
                        }
                    }
                }

                h3 {
                    margin-bottom: 15px;
                    color: #c9151e;
                    font-size: 15px;
                    font-weight: normal;
                }
            }
        }

        .show {
            position: fixed;
            left: 15px;
            bottom: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            color: #fff;
            font-size: 15px;
            background: #1e97f3;
            border-radius: 50%;
        }
    }

    .process {
        position: relative;
        height: 100%;
        padding: 20px 12px 20px 15px;

        h2 {
            color: #05a5ff;
            font-size: 18px;
            font-weight: normal;
            margin-bottom: 25px;
        }
        .processbox{
            height:  calc(80vh - 100px);
            overflow-y: scroll;
        }
        ul {
            margin-left: 10px;
            border-left: 1px solid #05a5ff;

            li {
                position: relative;
                padding: 0 0 20px 18px;

                i {
                    position: absolute;
                    top: 0;
                    left: 0;
                    color: #05a5ff;
                    font-style: normal;
                    width: 18px;
                    height: 18px;
                    line-height: 18px;
                    text-align: center;
                    background: #fff;
                    border: 2px solid #05a5ff;
                    border-radius: 50%;
                    transform: translateX(-50%);
                }

                h3 {
                    color: #05a5ff;
                    font-size: 15px;
                    font-weight: normal;
                }

                h4 {
                    color: #05a5ff;
                    font-weight: normal;
                    margin-top: 3px;
                }

                p {
                    margin: 8px 0 5px;
                    font-size: 14px;
                }

                span {
                    color: #999;
                    font-size: 13px;
                }

                .procedure-label  {
                    padding: 5px 10px;
                    margin-top: 10px;
                    height: auto;
                    line-height: 1.5em;
                    background: #f2f4fa;
                }

                &.gray {
                    color: #ccc;

                    i {
                        color: #ccc;
                        border-color: #ccc;
                    }

                    h3,
                    h4 {
                        color: #ccc;
                    }

                    span {
                        color: #ccc;
                    }
                }
            }
        }

        > span {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            background: url(../imgs/times.png) no-repeat center center;
            background-size: contain;
            border-radius: 50%;
        }
    }
    .DRFLBCColumtTxt{
        padding-bottom: 5px;
        p{
            padding-bottom: 3px;
        }
        .stime{
            text-align: right;
            font-size: 13px;
            color: #888;
            span{
                float: none!important;
                padding-right: 10px;
            }
        }

    }
</style>
